<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>学生信息注册页面</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-table.css" rel="stylesheet"/>
    <link href="css/bootstrap-select.min.css" rel="stylesheet"/>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        body {
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #eee;
        }

        .form-signin {
            max-width: 330px;
            padding: 15px;
            margin: 0 auto;
        }

        .form-signin .form-signin-heading,
        .form-signin .checkbox {
            margin-bottom: 10px;
        }

        .form-signin .checkbox {
            font-weight: normal;
        }
        .form-signin .form-control {
            position: relative;
            height: auto;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 10px;
            font-size: 16px;
        }
        .form-signin .form-control:focus {
            z-index: 2;
        }
        .form-signin input[type="email"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }
        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    </style>
</head>
<body>

<div class="container">

    <form class="form-signin" method="post" action="/rsm/user/regist.do">
        <h2 class="form-signin-heading">请注册</h2>
        <label for="inputEmail" class="sr-only">姓名</label>
        <input type="xsname" id="inputEmail" class="form-control" name="name" placeholder="姓名" required autofocus>
        <br>
        <label for="inputPassword" class="sr-only">手机号</label>
        <input type="text" id="inputPassword" class="form-control" name="phone" placeholder="手机号" required>
        <br>
        <label class="sr-only">年龄</label>
        <input type="text"  class="form-control" name="age" placeholder="年龄" required>
        <br>
        <label class="sr-only">邮箱</label>
        <input type="text" class="form-control" name="email" placeholder="邮箱" required>
        <br>
        <label class="sr-only">微信号</label>
        <input type="text" class="form-control" name="wechat" placeholder="微信号" required>
        <br>
        <label class="sr-only">QQ号</label>
        <input type="text" class="form-control" name="qq" placeholder="QQ号" required>
        <br>
        <select id="slpk" class="selectpicker" name="classid"></select>
        <br>
        <br>
        <button class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
    </form>

    <div class="form-signin">
        <p>注册成功后即可登录，密码固定均为123456</p>
    </div>

</div> <!-- /container -->



<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.3.1.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.js"></script>
<script src="js/bootstrap-table-zh-CN.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script>

    $(function() {

        $(".selectpicker").selectpicker({
            noneSelectedText : '请选择'
        });

        $(window).on('load', function() {
            $('.selectpicker').selectpicker('val', '');
            $('.selectpicker').selectpicker('refresh');
        });

        //下拉数据加载
        $.ajax({
            type : 'get',
            url : "/rsm/class/showall.do",
            dataType : 'json',
            success : function(datas) {//返回list数据并循环获取
                var select = $("#slpk");
                for (var i = 0; i < datas.length; i++) {
                    select.append("<option value='"+datas[i].classid+"'>"
                        + datas[i].classname + "</option>");
                }
                $('.selectpicker').selectpicker('val', '');
                $('.selectpicker').selectpicker('refresh');
            }
        });

    });
</script>
</body>
</html>
